<template>
  <div class="box">
    <div class="loginbox" :style="'box-shadow: 0 0 40px 30px ' + '#' + styleColor">
      <div class="neibox1"></div>
      <div class="neibox2">
        <div class="via">
          <img src="../assets/via.jpg" alt="" />
        </div>
        <!-- 表单区 -->
        <div class="login_form">
          <div class="inputbox">
            <div class="acount_box" :class="isAcount ? 'addClass' : ''">
              <i class="el-icon-user" :class="isAcount ? 'addClass2' : ''"></i>
              <input type="text" @input="toNum" @focus="styleMap(1)" @blur="styleMap(3)" v-model="formData.acount" />
              <i class="el-icon-arrow-down"></i>
            </div>
            <div class="psd_box" :class="isPsd ? 'addClass' : ''">
              <i :class="isPsd ? 'el-icon-unlock addClass2' : 'el-icon-lock'"></i>
              <input :type="isSeePsd ? 'text' : 'password'" @input="toPsd" @focus="styleMap(2)" @blur="styleMap(3)" v-model="formData.psd" />
              <i :class="isSeePsd ? 'el-icon-view addClass2' : 'el-icon-view'" @click="seePsd"></i>
            </div>
          </div>

          <div class="btnbox">
            <el-button size="small" type="primary"> 登陆 </el-button>
            <el-button size="small" type="info"> 注册 </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        acount: '',
        psd: ''
      },
      styleColor: '000',
      isAcount: false,
      isPsd: false,
      isSeePsd: false
    }
  },
  methods: {
    toNum() {
      this.formData.acount = this.formData.acount.replace(/\D/g, '')
      if (this.formData.acount.length > 10) {
        this.formData.acount = this.formData.acount.slice(0, 10)
      }
    },
    toPsd() {
      this.formData.psd = this.formData.psd.replace(/\W/g, '')
      if (this.formData.psd.length > 14) {
        this.formData.psd = this.formData.psd.slice(0, 16)
      }
    },
    styleMap(type) {
      if (1 === type) {
        this.isAcount = true
        this.isPsd = false
        this.isSeePsd = false
      } else if (2 === type) {
        this.isAcount = false
        this.isPsd = true
        this.isSeePsd = false
      } else if (3 === type) {
        this.isAcount = false
        this.isPsd = false
      }
    },
    seePsd() {
      this.isSeePsd = !this.isSeePsd
    }
  },
  created() {
    this.b = setInterval(() => {
      this.styleColor = Math.random()
        .toString(16)
        .slice(-6)
      console.log(11)
    }, 1000)
  },
  destroyed() {
    console.log('likail')
    clearInterval(this.b)
  }
}
</script>

<style scoped>
.loginbox {
  width: 430px;
  height: 330px;
  margin: auto;
  border-radius: 5px;
  transform: translateY(200px);
  /* overflow: hidden; */
  background: pink;
  transform: 0.3s;
  display: flex;
  flex-direction: column;
}

@keyframes move {
  0% {
    background: -webkit-linear-gradient(right, #72edf2, #5151e5);
  }

  50% {
    background: -webkit-linear-gradient(right, #c2ffd8, #465efb);
  }

  100% {
    background: -webkit-linear-gradient(right, #3c8ce7, #00eaff);
  }
}

.loginbox .neibox1 {
  height: 38%;
  animation: move 3s linear 0s infinite;
  transform: 1s ease;
}

.loginbox .neibox2 {
  position: relative;
  height: 62%;
  background: #fff;
}

.neibox2 .via {
  width: 70px;
  height: 70px;
  background: red;
  border-radius: 50%;
  box-shadow: 0 1px 5px 5px #ccc;
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

.neibox2 .via img {
  width: 100%;
  height: 100%;
}

.neibox2 .login_form {
  width: 240px;
  height: 100%;
  /* background: skyblue; */
  margin: 38px auto 0;
}

.login_form .inputbox {
}

.inputbox .acount_box,
.inputbox .psd_box {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #c1c1c1;
}

.acount_box input {
  flex: 1;
}

.inputbox input {
  flex: 1;
}

.addClass {
  border-bottom: 1px solid #12b7f5 !important;
}

.addClass2 {
  color: #12b7f5 !important;
}

input {
  outline: none;
  border: none;
  /* box-sizing: border-box; */
  padding: 3px 5px;
  font-weight: 500;
  height: 20px;
  font-size: 16px;
  transform: translateY(2px);
  margin-left: 3px;
}

.btnbox {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
</style>
